<template>
  <div class="gradient-background">
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.gradient-background {
  position: absolute;
  height: 100vh; /* 填满整个视口高度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background: #151515;
  animation: gradient-animation 5s ease infinite; /* 添加动画效果 */
  background-size: 400% 400%; /* 扩大背景尺寸以提升动画效果 */
  z-index: -1;
  opacity: 0.5;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%; /* 起始位置 */
  }
  50% {
    background-position: 100% 50%; /* 中间位置 */
  }
  100% {
    background-position: 0% 50%; /* 结束位置 */
  }
}


h1 {
  font-size: 3rem; /* 标题大小 */
}

p {
  font-size: 1.5rem; /* 段落大小 */
}
</style>
